<template>
  <div class="xq-form-wrapper page-miH page-bgBack p24">
    <div class="mb16" style="width: 206px">
      <selectCompanyGroup :siteIds.sync="siteId" />
    </div>
    <a-row type="flex" align="middle" justify="space-between">
      <a-col>
        <a-input-search
          allowClear
          v-model="searchName"
          placeholder="输入批次名/申请人/用工单位"
          class="mr12"
          style="width: 240px"
          :defaultValue="searchName"
          @search="onSearch"
        />
        <a-range-picker v-model="time" valueFormat="YYYY-MM-DD" style="width: 240px" @change="onSearch" :defaultValue="time" />
      </a-col>
      <a-col>
        <a-button type="primary" @click="onAdd"> 发薪申请 </a-button>
      </a-col>
    </a-row>
    <a-row type="flex" align="middle" justify="space-between">
      <a-col class="colw1">
        <div class="tabs" :class="tabStatus == 1 ? 'af-primary-border' : ''">
          <div class="back">
            <div class="tabs-item-one" :class="5 == applyForStatus ? 'af-primary' : ''" @click="onTab(5, 'applyForStatus', 1, 9)">
              未发放
            </div>
          </div>
          <div v-for="(item, index) in applyForArr" :key="index" class="back" @click="onTab(index, 'applyForStatus', 1, item.id)">
            <div class="tabs-item">
              <div :class="index == applyForStatus ? 'af-primary' : ''">{{ item.name }}</div>
              <div :class="index == applyForStatus ? 'af-primary' : ''">{{ item.num }}</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col class="colw2">
        <div class="tabs" :class="tabStatus == 2 ? 'af-primary-border' : ''">
          <div class="back">
            <div class="tabs-item-one" :class="4 == payStatus ? 'af-primary' : ''" @click="onTab(4, 'payStatus', 2, 5)">已发放</div>
          </div>
          <div v-for="(item, index) in payArr" :key="index" class="back" @click="onTab(index, 'payStatus', 2, item.id)">
            <div class="tabs-item">
              <div :class="index == payStatus ? 'af-primary' : ''">{{ item.name }}</div>
              <div :class="index == payStatus ? 'af-primary' : ''">{{ item.num }}</div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
      >
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <div v-if="col.dataIndex === 'gmtCreate'" :key="index">
            {{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "--" }}
          </div>
          <div v-else-if="col.dataIndex === 'subjectStatus'" :key="index">
            <div v-if="text == 1">
              <div class="statusp" style="background: #ffbb00"></div>
              待申请
            </div>
            <div v-if="text == 2">
              <div class="statusp" style="background: #4686ff"></div>
              审批中
            </div>
            <div v-if="text == 3">
              <div class="statusp" style="background: #ff7085"></div>
              已驳回
            </div>
            <div v-if="text == 4">
              <div v-if="record.payStatus == 1">
                <div class="statusp" style="background: #32ccaa"></div>
                待发放
              </div>
              <div v-if="record.payStatus == 5">
                <div class="statusp" style="background: #ffbb00"></div>
                发放中
              </div>
            </div>
            <div v-if="text == 5">
              <!-- <div v-if="record.payStatus == 1">
                <div class="statusp" style="background: #4686FF;"></div>
                发放中
              </div> -->
              <div v-if="record.payStatus == 2">
                <div class="statusp" style="background: #32ccaa"></div>
                发放成功
              </div>
              <div v-if="record.payStatus == 3">
                <div class="statusp" style="background: #ff7085"></div>
                发放失败
              </div>
              <div v-if="record.payStatus == 4">
                <div v-if="record.isDispose">
                  <div class="statusp" style="background: #ff7085"></div>
                  异常已处理
                </div>
                <div v-else>
                  <div class="statusp" style="background: #ff7085"></div>
                  发放异常
                </div>
              </div>
            </div>
          </div>

          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a
              @click="onInfo(record)"
              v-if="record.subjectStatus == 2 || record.subjectStatus == 3 || record.subjectStatus == 4 || record.subjectStatus == 5"
              >详情</a
            >
            <a-divider type="vertical" v-if="record.subjectStatus == 3" />
            <a @click="onAgain(record)" v-if="record.subjectStatus == 3">重新发起</a>

            <!-- <a @click="onEdit(record.id)" v-if="record.subjectStatus == 3">重新发起</a> -->
            <a @click="onEdit(record)" v-if="record.subjectStatus == 1">编辑</a>
            <a-divider type="vertical" v-if="record.subjectStatus == 1" />
            <a-popconfirm :title="`确认要删除吗？`" ok-text="确认" cancel-text="取消" @confirm="onClose(record.id)">
              <a v-if="record.subjectStatus == 1">删除</a>
            </a-popconfirm>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          :page-size="pageSize"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <select-way :visible.sync="visible" @changeSW="changeSW" />
    <editModel :visible.sync="visibleEdit" :dataJson="editJson" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import selectWay from "./component/select-way";
import editModel from "./component/editModel";
import { postTransferAccountsBatches, delTransferAccountsBatches, postStatisticsBatchStatusBySite } from "./api";
import moment from "moment";
import selectCompanyGroup from "@/components/SelectCompany";
import { mapGetters } from "vuex";
const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  components: {
    selectWay,
    editModel,
    selectCompanyGroup
  },
  data() {
    return {
      visible: false,
      visibleEdit: false,
      editJson: {},
      searchName: "",
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      tabStatus: 1,
      applyForStatus: 5,
      applyForArr: [
        { id: 1, name: "待申请", num: 0 },
        { id: 2, name: "审批中", num: 0 },
        { id: 3, name: "已驳回", num: 0 },
        { id: 4, name: "待发放", num: 0 }
      ],
      payStatus: -1,
      payArr: [
        { id: 6, name: "发放成功", num: 0 },
        { id: 7, name: "发放失败", num: 0 },
        { id: 8, name: "发放异常", num: 0 }
      ],
      subjectStatus: 9,
      time: [],
      siteId: "",
      lock: false
    };
  },
  watch: {
    siteId() {
      this.lock = true;
      this.onGetTransferAccountsBatches();
      this.onGetStatisticsBatchStatusBySite();
    }
  },
  computed: {
    ...mapGetters({
      SelectedId: "site/SelectedId",
      SelectedName: "site/SelectedName",
      SelectedAllIds: "site/SelectedAllIds"
    })
  },
  created() {
    this.selectTreeId = this.SelectedId;
    this.siteName = this.SelectedName;
    this.siteId = this.SelectedAllIds;
    if (JSON.stringify(this.$getCondition("fxsq_condition")) !== "{}") {
      var dparams = JSON.parse(this.$getCondition("fxsq_condition"));
      if (dparams.siteId && dparams.siteId === this.siteId) {
        this.tabStatus = 1;
        this.payStatus = -1;
        this.applyForStatus = -1;
        if (dparams.selectName) {
          this.searchName = dparams.selectName;
        }
        if (dparams.gmtCreateStart) {
          this.time[0] = dparams.gmtCreateStart;
        }
        if (dparams.gmtCreateEnd) {
          this.time[1] = dparams.gmtCreateEnd;
        }
        if (dparams.pageNo) {
          this.pageNo = dparams.pageNo;
        }
        if (dparams.pageSize) {
          this.pageSize = dparams.pageSize;
        }
        if (dparams.payStatus) {
          if (dparams.payStatus === 2) {
            this.subjectStatus = 6;
            this.tabStatus = 2;
            this.payStatus = 0;
          } else if (dparams.payStatus === 3) {
            this.subjectStatus = 7;
            this.tabStatus = 2;
            this.payStatus = 1;
          } else if (dparams.payStatus === 4) {
            this.subjectStatus = 8;
            this.tabStatus = 2;
            this.payStatus = 2;
          }
        }

        if (dparams.subjectStatus) {
          if (dparams.subjectStatus === 5) {
            this.subjectStatus = 5;
            this.tabStatus = 2;
            this.payStatus = 4;
          } else {
            this.subjectStatus = dparams.subjectStatus;
            if (this.subjectStatus === 1) {
              this.applyForStatus = 0;
            }
            if (this.subjectStatus === 2) {
              this.applyForStatus = 1;
            }
            if (this.subjectStatus === 3) {
              this.applyForStatus = 2;
            }
            if (this.subjectStatus === 4) {
              this.applyForStatus = 3;
            }
          }
        }
        if (dparams.notSubjectStatusList) {
          if (dparams.notSubjectStatusList.toString() === [5].toString()) {
            this.subjectStatus = 9;
            this.applyForStatus = 5;
          }
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      if (!this.lock) {
        this.onGetTransferAccountsBatches();
        this.onGetStatisticsBatchStatusBySite();
      }
    }, 1000);
  },
  methods: {
    moment,
    onTab(i, t, tabStatus, id) {
      this.pageNo = 1;
      this.subjectStatus = id;
      this.onGetTransferAccountsBatches();
      this[t] = i;
      this.tabStatus = tabStatus;
      if (tabStatus === 2) {
        // console.log(this.payStatus)
        this.applyForStatus = -1;
        if (this.columns[7].customTitle === "批次号") return;
        const json = {
          customTitle: "批次号",
          dataIndex: "thirdPartyInteriorBatchId",
          model: "thirdPartyInteriorBatchId",
          scopedSlots: { customRender: "thirdPartyInteriorBatchId" },
          slots: { title: "xq_thirdPartyInteriorBatchId" },
          sortDirections: null,
          sortOrder: false,
          sorter: null,
          type: undefined
        };
        this.columns.splice(7, 0, json);
      } else {
        this.payStatus = -1;
        if (this.columns[7].customTitle !== "批次号") return;
        this.columns.splice(7, 1);
      }
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetTransferAccountsBatches();
    },
    async onGetTransferAccountsBatches() {
      try {
        this.visible = false;
        this.spinning = true;
        const params = {
          selectName: this.searchName,
          gmtCreateStart: this.time[0] ? this.time[0] : "",
          gmtCreateEnd: this.time[1] ? this.time[1] : "",
          pageNo: this.pageNo,
          pageSize: this.pageSize
          // "orders[0].property": "gmtCreate",
          // "orders[0].desc": true
        };
        const siteId = this.siteId ? this.siteId.split(",") : [];
        if (this.siteId !== -1 && siteId.length > 0) {
          params.companyIdList = siteId;
        }
        if (this.subjectStatus === 6) {
          params.payStatus = 2;
          params.Orders = [
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        } else if (this.subjectStatus === 7) {
          params.payStatus = 3;
          params.Orders = [
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        } else if (this.subjectStatus === 8) {
          params.payStatus = 4;
          params.Orders = [
            {
              property: "isDispose",
              desc: false
            },
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        } else if (this.subjectStatus === 5) {
          params.subjectStatus = this.subjectStatus;
          params.Orders = [
            {
              property: "payStatus",
              desc: true
            },
            {
              property: "isDispose",
              desc: false
            },
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        } else if (this.subjectStatus === 9) {
          params.notSubjectStatusList = [5];
          params.Orders = [
            {
              property: "subjectStatus",
              desc: false
            },
            {
              property: "payStatus",
              desc: true
            },
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        } else {
          params.subjectStatus = this.subjectStatus;
          params.Orders = [
            {
              property: "gmtCreate",
              desc: true
            }
          ];
        }
        // notSubjectStatusList

        const { data } = await postTransferAccountsBatches(params);
        var p = JSON.parse(JSON.stringify(params));
        p.siteId = this.siteId;
        this.$setCondition("fxsq_condition", JSON.stringify(p));
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    async onGetStatisticsBatchStatusBySite() {
      try {
        const siteId = this.siteId ? this.siteId.split(",") : [];
        let arr = [];
        if (this.siteId !== -1 && siteId.length > 0) {
          arr = siteId;
        }
        const { data } = await postStatisticsBatchStatusBySite(arr);
        this.applyForArr[0].num = data.awaitApply;
        this.applyForArr[1].num = data.approveIng;
        this.applyForArr[2].num = data.reject;
        this.applyForArr[3].num = data.awaitIssue;
        this.payArr[0].num = data.issueSuccess;
        this.payArr[1].num = data.issueFail;
        this.payArr[2].num = data.issueError;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetTransferAccountsBatches();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetTransferAccountsBatches();
    },
    handleChange() {
      this.pageNo = 1;
      this.onGetTransferAccountsBatches();
    },
    onAdd() {
      this.visible = true;
    },
    onInfo(records) {
      const record = JSON.stringify(records);
      this.$router.push({ path: "/paySalary/examineDetail", query: { record, pageType: "applyFor" } });
    },
    onEdit(e) {
      this.$router.push({ name: "applyForInfo", query: { id: e.id, dataType: e.type } });
    },
    onAgain(r) {
      this.visibleEdit = true;
      this.editJson = r;
    },
    async onClose(id) {
      try {
        await delTransferAccountsBatches(id);
        if (this.tableData.length === 1) {
          this.pageNo = 1;
        }
        this.$notification.success({
          message: "操作成功"
        });
        this.onGetTransferAccountsBatches();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    changeSW(e) {
      if (e === 1) {
        // this.$router.replace({ name: "applyForInfo", query: { id: "468B1BA6B3004816994175579B865E14" } });
        this.$router.push({ name: "applyForAdd", query: { pageType: "selectPeople" } });
      }
      if (e === 2) {
        this.$router.push({ name: "applyForAdd", query: { pageType: "importPeople" } });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.colw1 {
  width: 53%;
}
.colw2 {
  width: 45%;
}
.tabs {
  height: 100px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid #fff;
  overflow: hidden;
  margin-top: 24px;
  text-align: center;
  color: #3c3d43;
  display: flex;
  justify-content: space-between;
  .back {
    padding: 26px 0;
    height: 100%;
    &:hover {
      background: #f4f6fa;
    }
  }
  & > div {
    width: 25%;
    height: 48px;
  }
  .tabs-item-one {
    line-height: 48px;
    border-right: 1px solid #e8e8e8;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  .tabs-item {
    border-right: 1px solid #e8e8e8;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;

    &:nth-child(5) {
      border-right: 0;
    }
    & > div:nth-child(1) {
      font-size: 14px;
      font-weight: 400;
      color: #a6a8b4;
      margin-bottom: 4px;
    }
  }
}
.af-primary {
  color: var(--primary) !important;
}
.af-primary-border {
  border-color: var(--primary) !important;
}
.statusp {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
